	<template>
		<view class="home">
			<view class="header_content">
				<image class="headerbg1" mode="scaleToFill" src="../../static/images/banner2.jpg" />
				<view class=" todayData ">
				  <view class="marquee-box todayData_box">
					<view class="todayData_content">
						<view class="todayData_txt">{{todayData.date}}</view>
						<view class="todayData_txt">农历：{{todayData.lunarCalendar}}</view>
						<view class="todayData_txt">今年第{{todayData.weekOfYear}}周</view>
						<view class="todayData_txt">今年第{{todayData.dayOfYear}}天</view>
						<view class="todayData_txt">星座：{{todayData.constellation}}</view>
						<view class="todayData_txt">{{todayData.yearTips}} {{todayData.chineseZodiac}}
							{{todayData.solarTerms}}</view>
					</view>
				  </view>
				</view>
				
				<!-- <view class="todayData" v-if="todayData&&todayData.date">
					<view class="todayData_box">
						<view class="todayData_txt">{{todayData.date}}</view>
						<view class="todayData_txt">农历：{{todayData.lunarCalendar}}</view>
						<view class="todayData_txt">今年第{{todayData.weekOfYear}}周</view>
						<view class="todayData_txt">今年第{{todayData.dayOfYear}}天</view>
						<view class="todayData_txt">星座：{{todayData.constellation}}</view>
						<view class="todayData_txt">{{todayData.yearTips}} {{todayData.chineseZodiac}}
							{{todayData.solarTerms}}</view>
					</view>
				</view> -->
				<view class="menu_box">
					<view class="headerbox">
						<view class="header_tt">
							<view class="header_img">
								<view class="iconfont  icon-caishen"></view>
							</view>
							<view class="header_name">
								"Hey，老铁"
							</view>
						</view>

						<view class="header_fixcenter">
							<view class="header_fixcenter_val">宜：<view>{{todayData.suit}}</view></view>
							<view class="header_fixcenter_val">忌：<view>{{todayData.avoid}}</view></view>
						</view>
					</view>
					<view class="menu_content">
						<view class="menu_panel">
							<view class="menu_list">
								<view class="menu_item" v-for="(item, index) in taskMenuList" :key="index"
									@click="goRouter(item)">
									<view class="icon_box">
										<view class="iconfont" :class="item.img"></view>
									</view>
									<view class="menu_name">{{ item.name }}</view>
								</view>
							</view>
						</view>


					</view>
				</view>
			</view>
		

		</view>
	</template>

	<script>
		export default {
			data() {
				return {
					userInfo: {},
					taskMenuList: [{
							img: "icon-fish",
							name: "摸鱼小工具",
							url: "../fish/index"
						}, {
							img: "icon-tea",
							name: "外卖大转盘",
							url: "../turntable/index"
						},
						{
							img: "icon-bagua",
							name: "签灵灵",
							url: "../dream/index"
						},
					],
					txt: '思考中',
					show: false,
					creat: false,
					content: '内容',
					contentflag: false,
					todayData: {}

				};
			},
			// components: {
			// 	login
			// },
			onLoad() {
				this.getTodayData()
			},
			onShareAppMessage(res) {
				return {
					title: '牛马工具', // 必填，最长28汉字
					path: '/pages/index/index', // 带参数示例
					imageUrl: '/static/images/share.jpg' // 建议尺寸比例5:4
				}
			},
			methods: {
				bindchooseavatar(e) {
					console.log(e)
				},

				goRouter(item) {
					uni.navigateTo({
						url: item.url
					})
				},
				getTodayData() {
					const now = new Date();
					const year = now.getFullYear();
					const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
					const day = String(now.getDate()).padStart(2, '0');
					uni.request({
						url: `https://www.mxnzp.com/api/holiday/single/${year}${month}${day}?ignoreHoliday=false&app_id=ho3krlhwxsofuuep&app_secret=0Fmf1cw2ZbAMlRgDbYvWYE2QxFKRmM19`, //仅为示例，并非真实接口地址。
						data: {},
						header: {},
						success: (res) => {
							console.log(res.data.data);
							this.todayData = res.data.data
						}
					});

				}


			},
		};
	</script>

	<style lang="less" scoped="">
		@import url("../../static/animate.min.css");

		body {
			font-family: "Alibaba";
		}

		.content {
			width: 100px;
			height: 100px;
			color: #fff;
			background: red;
		}

		.home {
			background: #fcfcfc;
			padding-bottom: 0.2rem;
			height: 100vh;
		}

		.header_content {
			.headerbg {
				width: 100%;
				// height: 159px;
			}

			.headerbg1 {
				width: 100%;
				// height: 159px;
			}

			.menu_box {
				width: 94%;
				max-width: 500px;
				margin: auto;
				border-radius: 11px;
				margin-top: -44px;
				overflow: hidden;
			}

			.headerbox {
				display: flex;
				align-items: center;
				background: rgb(10, 10, 10);
				justify-content: space-between;
				padding: 6px 10px;
				z-index: 2;
				position: relative;

				// box-sizing: border-box;
				.header_tt {
					display: flex;
					align-items: center;

					.header_img {
						width: 30px;
						height: 30px;
						border-radius: 11px;
						margin-right: 6px;

						.icon-caishen {
							font-size: 36px;
							  animation: shake 1.2s ease-in-out infinite;
							  transform-origin: center bottom; /* 设置旋转支点 */
						}

					}

					.header_name {
						font-size: 12px;
						color: #ffcb6b;
						font-weight: bold;
						font-family: "Alibaba";
					}
				}

				.header_fixcenter {
					align-items: center;

					.header_fixcenter_val {
						font-size: 12px;
						margin-right: 6px;
						color: #ffcb6b;
						font-family: "Alibaba";
						display: flex;
					}

					.header_fixcenter_icon {
						width: 16px;
					}
				}
			}
		}

		.menu_content {

			// margin: 10px;
			.menu_panel {
				background: #fff;
				padding: 13px 11px;
				padding-bottom: 0;

				.menu_tt {
					font-size: 16px;
					color: #979797;
					margin-bottom: 32px;
					font-family: "Alibaba";
				}

				.menu_list {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;

					.menu_item {
						width: 22%;
						margin-right: 4%;
						margin-bottom: 20px;
						cursor: pointer;

						.icon_box {
							text-align: center;
							margin: auto;
							display: block;
							margin-bottom: 10px;
							height: 40px;

							.icon-tea {
								font-size: 40px;
							}

							.icon-fish {
								font-size: 32px;
								position: relative;
								top: 5px;
							}

							.icon-bagua {
								font-size: 40px;
							}
						}

						.icon_class {
							width: 35px;
							height: 35px;
						}

						&:nth-child(4n) {
							margin-right: 0;
						}

						.menu_icon {
							width: 44px;
							display: block;
							margin: auto;
							margin-bottom: 12px;
						}

						.menu_name {
							text-align: center;
							font-size: 12px;
							font-family: "Alibaba";
							font-weight: bold;
						}
					}
				}
			}
		}

		.home {
			background: #f7f7f7;
			height: 100vh;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#090b44', endColorstr='#00001c', GradientType=1);
			padding: 0;
			font-family: "open sans";
			position: relative;
			margin: 0;
			// height: 100%;
			padding-bottom: 50px;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		}

		canvas {
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: fixed;
			pointer-events: none;
			/* 让上层盒子不接收鼠标事件 */
		}

		.header {
			position: relative;
		}

		canvas.flare {
			opacity: 0.5;
		}

		.todayData {
			background: rgba(255, 255, 255, 0.1);
			position: absolute;
			top: 60px;
			width: 80%;
			margin: auto;
			left: 10%;
			border-radius: 10px;
			padding: 10px;
			box-sizing: border-box;
			.todayData_txt {
				float: left;
				width: 50%;
				font-size: 16px;
				margin-bottom: 5px;
				color: #fff;
			}


			.todayData_box {
				overflow: hidden;
			}


		}

		@keyframes shake {
			0% {
				transform: rotate(0deg);
			}

			20% {
				transform: rotate(-15deg);
			}

			40% {
				transform: rotate(10deg);
			}

			60% {
				transform: rotate(-10deg);
			}

			80% {
				transform: rotate(5deg);
			}

			100% {
				transform: rotate(0deg);
			}
		}
		
		
		.marquee-box {
		  width: 100%;
		  height: 200rpx;
		  position: relative;
		  background: #1a1a1a;
		  border-radius: 16rpx;
		  overflow: hidden;
		}
		
		.marquee-box::before {
		  content: "";
		  position: absolute;
		  width: 200%;
		  height: 200%;
		  background: conic-gradient(
		    #ff3366, #ff9933, #ffcc33, #33cc33, #3399ff, #9966ff, #ff3366
		  );
		  animation: rotate 3s linear infinite;
		  top: -50%;
		  left: -50%;
		}
		
		@keyframes rotate {
		  100% { transform: rotate(360deg); }
		}
		
		.todayData_content {
		  position: relative;
		  z-index: 2;
		  margin: 4rpx;
		  height: calc(100% - 8rpx);
		  background: #1a1a1a;
		  border-radius: 12rpx;
		  color: white;
		  font-size: 32rpx;
		  width: calc(100% - 8rpx);
		  box-sizing: border-box;
		  padding: 20rpx;
		}

	</style>